<template>
	<view class="" style="height: 100%;">
	<!-- 	<view class="" @click="SX">
			筛选
		</view> -->
		<mescroll-uni :fixed="false" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<view class="mescroll-item" v-for="(item,index) in goods" @click="toDetails(item)">

				<view class="mescroll-item-left">
					<image src="/static/img/ic_active.png" v-if="item.activationStatus =='1'"
						style="width:40px;height:40px;"></image>
					<image src="/static/img/ic_unactive.png" v-else style="width:40px;height:40px;"></image>
				</view>
				<view class="mescroll-item-right">
					<view class="right-item title">
						<text>{{item.merchantName}}</text>
						<text>当月总额：{{item.orderAmt}}</text>
					</view>
					<view class="right-item concent">
						<text>品牌名称：{{item.acqName}}</text>
						<!-- <text></text> -->
						<text>交易笔数：{{item.orderNum || '0'}}</text>
					</view>
					<view class="right-item concent">
						<text>SN：{{item.snNo }}</text>
						<text></text>
					</view>
					<view class="right-item concent">
						<text>激活时间：{{item.activationTime }}</text>
						<text></text>
					</view>
					<view class="right-item concent">
						<text>绑定时间：{{item.createDate}}</text>
						<text></text>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<u-popup v-model="show" mode="center" border-radius="14" width="90%">
			<view class="popup-box">
				<view class="popup-box-title">
					筛选条件
				</view>
				<view class="popup-box-line">

				</view>
				<view class="popup-box-title martop">
					SN：
				</view>
				<view class="popup-box-input">
					<input type="text" v-model="form.name" placeholder="请输入SN号" />
				</view>
				<view class="popup-box-title martop">
					商户名：
				</view>
				<view class="popup-box-input">
					<input type="text" v-model="form.merName" placeholder="请输入商户名" />
				</view>
				<view class="popup-box-title martop">
					产品：
				</view>
				<view class="radioList-box" >
					<!-- @change="radioChange" -->
					<radio-group class="radioList" >
						<label class="radioList-item" v-for="(item, index) in CPlist" :key="index">
							<view>
								<radio :value="item.value" :checked="index === current" @click="radioClick(item,index)" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>

				<view class="popup-box-title martop">
					激活状态：
				</view>
				<view class="radioList-box" >
					<!-- @change="radioChange" -->
					<radio-group class="radioList" >
						<label class="radioList-item" v-for="(item, index) in activeStatuslist" :key="index">
							<view>
								<radio :value="item.value" :checked="index === activecurrent" @click="activeradioClick(item,index)" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>


				<view class="popup-box-title martop">
					激活时间：
				</view>
				<view class="deliver-query">
					<view class="deliver-time">

						<image src="/static/img/index/query_time.png" style="width:28rpx;height:28rpx;"></image>
						<picker mode="date" :value="activstartDeta" :start="startTime" :end="endTime"
							@change="startDateChange">
							<view class="picker">
								{{activstartDeta}}
							</view>
						</picker>
						<image src="/static/img/index/ic_clear.png" style="width:28rpx;height:28rpx;"
							@click="cassa('activstartDeta')" v-if="activstartDeta !='开始时间'"></image>
					</view>
					<view class="line">—</view>
					<view class="deliver-time">

						<image src="/static/img/index/query_time.png" style="width:28rpx;height:28rpx;"></image>
						<picker mode="date" :value="endTime" :start="activstartDeta" :end="endTime"
							@change="endDateChange">
							<view class="picker">
								{{activendDetaL}}
							</view>
						</picker>
						<image src="/static/img/index/ic_clear.png" style="width:28rpx;height:28rpx;"
							@click="cassa('activendDetaL')" v-if="activendDetaL !='结束时间'"></image>
					</view>
				</view>
				<view class="popup-box-title martop">
					绑定时间：
				</view>
				<view class="deliver-query">
					<view class="deliver-time">

						<image src="/static/img/index/query_time.png" style="width:28rpx;height:28rpx;"></image>
						<picker mode="date" :value="bindstartDeta" :start="startTime" :end="endTime"
							@change="bindDateChange">
							<view class="picker">
								{{bindstartDeta}}
							</view>
						</picker>
						<image src="/static/img/index/ic_clear.png" style="width:28rpx;height:28rpx;"
							@click="cassa('bindstartDeta')" v-if="bindstartDeta !='开始时间'"></image>

					</view>
					<view class="line">—</view>
					<view class="deliver-time">

						<image src="/static/img/index/query_time.png" style="width:28rpx;height:28rpx;"></image>
						<picker mode="date" :value="endTime" :start="bindstartDeta" :end="endTime"
							@change="bindendDateChange">
							<view class="picker">
								{{bindendDetaL}}
							</view>
						</picker>
						<image src="/static/img/index/ic_clear.png" style="width:28rpx;height:28rpx;"
							@click="cassa('bindendDetaL')" v-if="bindendDetaL !='结束时间'"></image>
					</view>

				</view>
				<view class="queryBut-box">
					<button class="queryBut" @click="commit">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: true //  false 不自动加载 (mixin已处理第一个tab触发downCallback)  true
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4,
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '暂无更多', // 没有更多数据的提示文本
					empty: {
						tip: '暂无相关数据', // 提示
					},
				},
				goods: [],
				form: {
					"activationStatus": "",
					"activationTimeFrom": "",
					"activationTimeTo": "",
					"bindTimeFrom": "",
					"bindTimeTo": "",
					"cpValue": "",
					"merName": "",
					"name": "",
					"tenantId": 0
				},
				show: false,
				activstartDeta: '开始时间',
				activendDetaL: '结束时间',
				bindstartDeta: '开始时间',
				bindendDetaL: '结束时间',
				radioSelect: 0,
				CPlist: [
				],
				current: null,
				activeStatuslist:[
					{
						name:'已激活',
						value:'1'
					},
					{
						name:'未激活',
						value:'0'
					}
				],
				activecurrent: null,
			}
		},
		//#ifdef APP-PLUS
		onNavigationBarButtonTap: function(e) {
			// console.log(e);
			this.SX()
		},
		//#endif
		onShow() {
		this.getcplist();
		},
		methods: {
			async getcplist() {
				const res = await util.request(
					api.cplistUrl, {},
					'POST'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
			
				} else {
					this.CPlist =res.data
				}
			},
			// radioChange(evt) {
			// 	console.log(evt);
			//             for (let i = 0; i < this.items.length; i++) {
			//                 if (this.items[i].value === evt.detail.value) {
			//                     this.current = i;
			//                     break;
			//                 }
			//             }
			//         },
			radioClick(item,e) {
				
				if (e == this.current) {
					this.current = null
					this.form.cpValue = ''
				} else {
					this.current = e
					this.form.cpValue = item.value
				}
				console.log(this.form.cpValue);
			},
			activeradioClick(item,e) {
				if (e == this.activecurrent) {
					this.activecurrent = null
					this.form.activationStatus = ''
				} else {
					this.activecurrent = e
					this.form.activationStatus = item.value
				}
				console.log(this.form.activationStatus);
			},
			commit() {
				this.show = false
				this.mescroll.resetUpScroll()
			},
			cassa(str) {
				if (str == 'activstartDeta') {
					this.activstartDeta = "开始时间"
				} else if (str == 'activendDetaL') {
					this.activendDetaL = "结束时间"
				} else if (str == 'bindstartDeta') {
					this.bindstartDeta = "开始时间"
				} else if (str == 'bindendDetaL') {
					this.bindendDetaL = "结束时间"
				}
			},
			startDateChange: function(e) {
				this.activstartDeta = e.detail.value
			},
			endDateChange: function(e) {
				this.activendDetaL = e.detail.value
			},
			bindDateChange: function(e) {
				this.bindstartDeta = e.detail.value
			},
			bindendDateChange: function(e) {
				this.bindendDetaL = e.detail.value
			},
			SX() {
				this.show = true
			},
			toDetails(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pages/myMer/myMerdetails?sn=' + item.snNo
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				// this.mescroll.endErr();
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				const res = util.request(
					api.merchantlistUrl, {
						page: pageNum,
						limit: pageSize,
						"activationStatus": this.form.activationStatus,
						"activationTimeFrom": this.activstartDeta == '开始时间' ? '' : this.activstartDeta,
						"activationTimeTo": this.activendDetaL == '结束时间' ? '' : this.activendDetaL,
						"bindTimeFrom": this.bindstartDeta == '开始时间' ? '' : this.bindstartDeta,
						"bindTimeTo": this.bindendDetaL == '结束时间' ? '' : this.bindendDetaL,
						"cpValue": this.form.cpValue,
						"merName": this.form.merName,
						"name": this.form.name,
						"tenantId": 3

					},
					'POST'
				).then(res => {
					console.log(res);
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					let totalPage = res.data.pages;
					this.mescroll.endByPage(res.data.records.length, totalPage); //必传参数(当前页的数据个数, 总页数)
					// this.mescroll.endSuccess(res.data.records.length);
					//设置列表数据
					if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods = this.goods.concat(res.data.records); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		background-color: #FAFAFA;
	}
</style>
<style lang="scss" scoped>
	.mescroll-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 20rpx 10rpx;
	}

	.mescroll-item-left {
		width: 40px;
		height: 40px;
		margin-right: 15px;

	}

	.mescroll-item-right {
		flex: 1;
		padding: 5px;

		.right-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.title {
			font-size: 15px;
			color: #000;
		}

		.concent {
			margin-top: 6px;
			color: #959595;
			font-size: 13px;
		}
	}

	.popup-box {
		padding: 15px;

	}

	.popup-box-title {
		font-size: 15px;
		font-weight: 600;
		color: #000;
	}

	.popup-box-line {
		background-color: #E5E5E5;
		height: 1px;
		width: 100%;
		margin-top: 10px;
	}

	.martop {
		margin-top: 10px;
	}

	.popup-box-input {
		height: 32px;
		margin-top: 6px;

		input {
			border: 1px solid #E5E5E5;
			border-radius: 5px;
			padding: 5px;
		}
	}

	.deliver-query {
		padding-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
		// width: 690rpx;
		margin: 0rpx auto;
	}

	.deliver-time {
		color: #AEAEAE;
		font-size: 26rpx;
		width: 45%;
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		background: white;
		border: 1px solid #E5E5E5;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}

	.deliver-time>text {
		padding-left: 10rpx;
	}

	.line {
		color: #D2D2D2;
		font-size: 30rpx;
		padding: 0 20rpx;
	}

	.picker {
		padding-left: 15rpx;
		padding-right: 15rpx;
	}

	.queryBut-box {
		margin-top: 10px;
	}

	.queryBut {
		margin: 0 auto;
		width: 100rpx;
		height: 62rpx;
		background-color: #6A9FFB;
		font-size: 25rpx;
		padding: 0rpx;
		color: #fff;
		line-height: 62rpx;
		// margin-left: 25rpx;
	}
	.radioList{
		
		display: flex;
		align-content: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		
	}
	.radioList-item{
	width: 49%;
		display: flex;
		align-content: center;
		justify-content: center;
	}
	.radioList-box{
		padding: 10px 5px;
	}
</style>